Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Frame] Add ContextualSaveBar props to context #11826

Merged
merged 5 commits into from
Apr 11, 2024

Conversation

sophschneider
Copy link
Contributor

@sophschneider sophschneider commented Apr 2, 2024

WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1471

WHAT is this pull request doing?

  • Adds contextualSaveBarVisible and contextualSaveBarProps to Frame context
  • Does not render ContextualSaveBar UI when dynamicTopBarAndReframe feature flag is on

This is to enable us to create our own contextual save bar styles in web as a child of the new TopBar while still using the frame context architecture to manage hiding and showing the bar.

How to 🎩

  1. Make sure contextual save bar with the beta flag off is unaffected (spin)
  2. Make sure contextual save bar with beta flag on doesn't show up (spin)

🎩 checklist

@sophschneider
Copy link
Contributor Author

/snapit

Copy link
Contributor

github-actions bot commented Apr 3, 2024

🫰✨ Thanks @sophschneider! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240403023156"

@sophschneider
Copy link
Contributor Author

/snapit

Copy link
Contributor

github-actions bot commented Apr 4, 2024

🫰✨ Thanks @sophschneider! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240404194746"

@yurm04
Copy link
Contributor

yurm04 commented Apr 8, 2024

/snapit

Copy link
Contributor

github-actions bot commented Apr 8, 2024

🫰✨ Thanks @yurm04! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

"@shopify/polaris-migrator": "0.0.0-snapshot-20240408215908"
"@shopify/polaris": "0.0.0-snapshot-20240408215908"

@sophschneider
Copy link
Contributor Author

/snapit

1 similar comment
@sophschneider
Copy link
Contributor Author

/snapit

Copy link
Contributor

🫰✨ Thanks @sophschneider! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240410183035"

@sophschneider sophschneider force-pushed the contextual-save-bar-updates branch 2 times, most recently from 39acc63 to 7f80da0 Compare April 10, 2024 22:48
@sophschneider
Copy link
Contributor Author

/snapit

Copy link
Contributor

🫰✨ Thanks @sophschneider! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

"@shopify/polaris": "0.0.0-snapshot-20240410224956"

@sophschneider sophschneider changed the title Contextual save bar experimental [Frame] Add ContextualSaveBar props to context Apr 11, 2024
@sophschneider sophschneider marked this pull request as ready for review April 11, 2024 16:49
Copy link
Contributor

@yurm04 yurm04 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great and tested and web 🏆

@sophschneider sophschneider merged commit a7fd7ab into main Apr 11, 2024
13 checks passed
@sophschneider sophschneider deleted the contextual-save-bar-updates branch April 11, 2024 16:52
sophschneider added a commit that referenced this pull request Apr 17, 2024
### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1379
Follow up to #11826, this change
is still behind a feature flag.

* Moving scrollbar buffer from main to content in `Frame` since we moved
the scrollbar to just the content
* updating `scroll` -> `auto` ensures the scrollbar doesn't show up when
there isn't any scroll.

## Tophat


[Spin](https://admin.web.web-npdr.sophie-schneider.us.spin.dev/store/shop1/products?selectedView=all)

* turn on scrollbars always show in settings, shorten the window so the
scrollbar hides and shows and make sure there isn't a layout shift

![Screen Recording 2024-04-17 at 9 56
36 AM](https://github.com/Shopify/polaris/assets/20652326/9933ab0c-af83-46a4-b60b-d5626f785680)

- [x] Chrome, Firefox, Safari
- [x] Mobile
sophschneider pushed a commit that referenced this pull request Apr 17, 2024
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.


# Releases
## @shopify/[email protected]

### Minor Changes

- [#11883](#11883)
[`a60d8aa4f`](a60d8aa)
Thanks [@chloerice](https://github.com/chloerice)! - Added a
`disclosureZIndexOverride` prop to `Filters`, `IndexFilters`, and `Tabs`
that is passed to `Popover` and `Tooltip` when provided


- [#11826](#11826)
[`a7fd7ab5d`](a7fd7ab)
Thanks [@sophschneider](https://github.com/sophschneider)! - Added
`contextualSaveBarVisible` and `contextualSaveBarProps` to `Frame`
context

### Patch Changes

- [#11842](#11842)
[`2a93578af`](2a93578)
Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed layout
shift for option lists within popovers


- [#11846](#11846)
[`ce6353b97`](ce6353b)
Thanks [@sophschneider](https://github.com/sophschneider)! - Restyled
Frame content behind dynamicTopBarAndReframe feature flag


- [#11872](#11872)
[`696bcb725`](696bcb7)
Thanks [@mattkubej](https://github.com/mattkubej)! - globally remove
link tap highlighting


- [#11874](#11874)
[`744036706`](7440367)
Thanks [@laurkim](https://github.com/laurkim)! - Added support for ref
to `Image` to handle image load with `EmptyState`


- [#11881](#11881)
[`c96ff56a0`](c96ff56)
Thanks [@sophschneider](https://github.com/sophschneider)! - Fixed Frame
feature override class to get proper max-width for main content.


- [#11885](#11885)
[`af80d3a82`](af80d3a)
Thanks [@craigcolesshopify](https://github.com/craigcolesshopify)! -
[indexTable] Fixed over scroll gap on `IndexTable` for sortable last
headings with `alignment="end"`


- [#11889](#11889)
[`374030428`](3740304)
Thanks [@chloerice](https://github.com/chloerice)! - Fixed `TextField`
zoom on focus due to font-size below 16px


- [#11900](#11900)
[`215b79271`](215b792)
Thanks [@sophschneider](https://github.com/sophschneider)! - Fixed
`Frame` scrollbar safe area to accommodate sidebar


- [#11842](#11842)
[`2a93578af`](2a93578)
Thanks [@kyledurand](https://github.com/kyledurand)! - Changed selected
icon position in Listbox and OptionList


- [#11891](#11891)
[`c84d4e875`](c84d4e8)
Thanks [@sophschneider](https://github.com/sophschneider)! - Moved
`Frame` scrollbar from main to content and set overflow-y from scroll to
auto behind a feature flag

## [email protected]

### Patch Changes

- Updated dependencies
\[[`a60d8aa4f`](a60d8aa),
[`2a93578af`](2a93578),
[`ce6353b97`](ce6353b),
[`696bcb725`](696bcb7),
[`744036706`](7440367),
[`c96ff56a0`](c96ff56),
[`af80d3a82`](af80d3a),
[`374030428`](3740304),
[`215b79271`](215b792),
[`a7fd7ab5d`](a7fd7ab),
[`2a93578af`](2a93578),
[`c84d4e875`](c84d4e8)]:
    -   @shopify/[email protected]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
AnnaCheba pushed a commit to AnnaCheba/polaris that referenced this pull request Apr 22, 2024
<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Open it as a draft if it’s a work in progress
-->

### WHY are these changes introduced?

Part of https://github.com/Shopify/polaris-internal/issues/1471

### WHAT is this pull request doing?

* Adds `contextualSaveBarVisible` and `contextualSaveBarProps` to
`Frame` context
* Does not render `ContextualSaveBar` UI when `dynamicTopBarAndReframe`
feature flag is on

This is to enable us to create our own contextual save bar styles in web
as a child of the new `TopBar` while still using the frame context
architecture to manage hiding and showing the bar.

### How to 🎩

1. Make sure contextual save bar with the beta flag off is unaffected
(spin)
2. Make sure contextual save bar with beta flag on doesn't show up
(spin)

### 🎩 checklist

- [x] Tested a
[snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases)
- [x] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants